<!DOCTYPE html>
<html>
<head>
    <title>Three.js Futuristic Animation</title>
    <style>
        body {
            margin: 0;
            background: linear-gradient(120deg, #1f1c2c, #928dab); /* 科技感渐变背景 */
            overflow: hidden; /* 防止滚动条出现 */
            font-family: 'Arial', sans-serif;
        }
        canvas {
            display: block;
        }
        .overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 1.2em;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="overlay">Futuristic Three.js Scene</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.159.0/three.min.js"></script>
    <script>
        let scene, camera, renderer, particles, sphere, light;

        function init() {
            // Scene setup
            scene = new THREE.Scene();
            
            // Camera setup
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 2, 10);

            // Renderer setup
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // Create reflective sphere
            const sphereGeometry = new THREE.SphereGeometry(2, 64, 64);
            const sphereMaterial = new THREE.MeshStandardMaterial({
                metalness: 0.8,
                roughness: 0.2,
                color: 0x77ccff,
                emissive: 0x111111,
                envMapIntensity: 1
            });
            sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.position.y = 2;
            scene.add(sphere);

            // Add particles
            const particleCount = 5000;
            const particlesGeometry = new THREE.BufferGeometry();
            const positions = new Float32Array(particleCount * 3);

            for (let i = 0; i < particleCount * 3; i++) {
                positions[i] = (Math.random() - 0.5) * 100;
            }

            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

            const particlesMaterial = new THREE.PointsMaterial({
                size: 0.1,
                sizeAttenuation: true,
                color: 0xffffff,
                transparent: true,
                opacity: 0.8
            });

            particles = new THREE.Points(particlesGeometry, particlesMaterial);
            scene.add(particles);

            // Lighting
            light = new THREE.PointLight(0xffffff, 1.5, 50);
            light.position.set(0, 10, 10);
            scene.add(light);

            const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
            scene.add(ambientLight);

            // Animate
            animate();
        }

        function animate() {
            requestAnimationFrame(animate);

            // Rotate sphere and particles
            sphere.rotation.y += 0.01;
            particles.rotation.y += 0.002;

            // Update light position
            light.position.x = Math.sin(Date.now() * 0.001) * 10;

            // Render scene
            renderer.render(scene, camera);
        }

        // Handle window resize
        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });

        // Initialize scene
        window.onload = init;
    </script>
</body>
</html>